Ionic 生命週期

Ionic 框架也提供了自己的生命週期方法，與 Vue 的生命週期方法定義方式相同，但 Ionic 的生命週期方法只會在 router 直接指向的組件上被調用。
例如 /tabs/tab1 路徑指向到 TabsPage 這個 Component，則 TabsPage Component 會觸發 Ionic 的生命週期方法。但若 TabsPage Component 中渲染了其他子組件，這些子組件則不會觸發 Ionic 的生命週期方法。

Ionic 生命週期方法與特性

• ionViewWillEnter
  組件即將顯示前觸發的事件。

• ionViewDidEnter
  組件已完全顯示後觸發的事件。

• ionViewWillLeave
  組件即將被隱藏或離開前觸發的事件。

• ionViewDidLeave
  組件已被隱藏或離開後觸發的事件。

原本預設有定義一個 component TabsPage，是專門定義 Tabs 的頁面路徑與關聯，在 TestPage.vue 中加上這段程式碼：

<script setup>
import {
  ...
  onIonViewWillEnter,
  onIonViewDidEnter,
  onIonViewWillLeave,
  onIonViewDidLeave,
} from "@ionic/vue";

const name = "TabsPage";

onIonViewDidEnter(() => {
  console.log("TabsPage page did enter");
});

onIonViewDidLeave(() => {
  console.log("TabsPage page did leave");
});

onIonViewWillEnter(() => {
  console.log("TabsPage page will enter");
});

onIonViewWillLeave(() => {
  console.log("TabsPage page will leave");
});
</script>

在頁面載入時可以看到：

在 /tabs/tab1 的頁面上用 router link 指向另一個定義好的頁面 /test，點擊跳轉後會看到：

也就是 router 定義指向頁面之間互相跳轉即可觸發 ionic 的生命週期，如果是使用 <a> 連結或網址自己輸入則不會觸發。